<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS模块化-右键实例</title>
    <style type="text/css">
        #rightKeyArea {
            position: absolute;
            width: 300px;
            height: 300px;
            background: lightgreen;
            left: 50%;
            margin-left: -150px;
            text-align: center;
            line-height: 300px;
        }
        #rkInfo {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 200px;
            background: lightgray;
            display: none;
        }
        #rkInfo ul {
            width: 200px;
            list-style: none;
            padding: 0;
            margin-top: 10px;
        }
        #rkInfo ul li {
            padding-left: 10px;
            height: 30px;
            line-height: 30px;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
//        下面是面向对象的代码
        window.onload = function () {
            //阻止默认菜单事件
            document.oncontextmenu = function () {
                return false;
            };
            //点击隐藏菜单事件
            document.onclick = function () {
                var oMemu = document.getElementById('rkInfo');
                oMemu.style.display = 'none';
            }
            //注册右键事件
            var oDiv = document.getElementById('rightKeyArea');
            oDiv.onmouseup = function (e) {
                e = e || window.event;
                if (e.button != 2) {
                    return;
                }
                console.log(3);
                var oMemu = document.getElementById('rkInfo');
                oMemu.style.left = e.clientX + 'px';
                oMemu.style.top = e.clientY + 'px';
                var aLi = oMemu.getElementsByTagName('li');
                for (var i = 0; i < aLi.length; i++) {
                    aLi[i].onclick = function (e) {
                        console.log(this.innerHTML);
                        stopBubble(e);
                        // return false;//原生js的return false;只阻止默认行为，但是不阻止冒泡
                    }
                    aLi[i].onmouseover = function () {
                        this.style.background = 'blue';
                    }
                    aLi[i].onmouseout = function () {
                        this.style.background = 'lightgray';
                    }
                }
                oMemu.style.display = 'block';
            }
            //阻止冒泡
            function stopBubble(e) {
                window.event ? window.event.cancelBubble = true : e.stopPropagation();
                // e = e || window.e;
                // if(window.e){
                // 	e.cancelBubble = false;
                // }else{
                // 	e.stopPropagation();
                // }
            }
            //阻止默认行为
            function stopDefault(e) {
                window.event ? window.event.returnValue = false : e.preventDefault();
                // e = e || window;
                // if(window.event){
                // 	e.returnValue = false;
                // }else{
                // 	e.preventDefault();
                // }
            }
            //return false;阻止冒泡和默认事件
        }
    </script>

    <!--面向对象-->
    <!--<script>-->
        <!--window.onload = function () {-->
            <!--//阻止默认菜单事件-->
            <!--document.oncontextmenu = function () {-->
                <!--return false;-->
            <!--};-->
            <!--//点击隐藏菜单事件-->
            <!--document.onclick = function () {-->
<!--//                this 是 document-->
                <!--this.oMemu = document.getElementById('rkInfo');-->
                <!--this.oMemu.style.display = 'none';-->
            <!--}-->
            <!--//注册右键事件-->
<!--//            this 是 window-->
            <!--this.oDiv = document.getElementById('rightKeyArea');-->
            <!--this.oDiv.onmouseup = function (e) {-->
<!--//                this 是 oDiv-->
                <!--e = e || window.event;-->
                <!--if (e.button != 2) {-->
                    <!--return;-->
                <!--}-->
                <!--console.log(3);-->
                <!--this.oMemu = document.getElementById('rkInfo');-->
                <!--this.oMemu.style.left = e.clientX + 'px';-->
                <!--this.oMemu.style.top = e.clientY + 'px';-->
                <!--this.aLi = this.oMemu.getElementsByTagName('li');-->
                <!--for (var i = 0; i < this.aLi.length; i++) {-->
                    <!--this.aLi[i].onclick = function (e) {-->
                        <!--console.log(this.innerHTML);-->
                        <!--stopBubble(e);-->
                        <!--// return false;//原生js的return false;只阻止默认行为，但是不阻止冒泡-->
                    <!--}-->
                    <!--this.aLi[i].onmouseover = function () {-->
                        <!--this.style.background = 'blue';-->
                    <!--}-->
                    <!--this.aLi[i].onmouseout = function () {-->
                        <!--this.style.background = 'lightgray';-->
                    <!--}-->
                <!--}-->
                <!--this.oMemu.style.display = 'block';-->
            <!--}-->
            <!--//阻止冒泡-->
            <!--function stopBubble(e) {-->
                <!--window.event ? window.event.cancelBubble = true : e.stopPropagation();-->
                <!--// e = e || window.e;-->
                <!--// if(window.e){-->
                <!--// 	e.cancelBubble = false;-->
                <!--// }else{-->
                <!--// 	e.stopPropagation();-->
                <!--// }-->
            <!--}-->

            <!--//阻止默认行为-->
            <!--function stopDefault(e) {-->
                <!--window.event ? window.event.returnValue = false : e.preventDefault();-->
                <!--// e = e || window;-->
                <!--// if(window.event){-->
                <!--// 	e.returnValue = false;-->
                <!--// }else{-->
                <!--// 	e.preventDefault();-->
                <!--// }-->
            <!--}-->

            <!--//return false;阻止冒泡和默认事件-->
        <!--}-->
    <!--</script>-->
</head>
<body>
<div id="rightKeyArea">右键点击</div>
<div id="rkInfo">
    <ul>
        <li>新建</li>
        <li>增加</li>
        <li>删除</li>
    </ul>
</div>
</body>
</html>